<template>
    <div class="box" v-for="el in arr1">
        
            <div class="bigbox">
                <div>
                    <span class="title">{{ el.title }}</span>
                    <div class="box01">
                        <img class="touxiang" :src="el.avatar">
                        <p class="username">{{ el.auther }}</p>
                    </div>
                </div>
            </div>
            <div class="box02">
                <div class="videobox">
                    <div class="myvideo">
                        <p>{{ el.title }}</p>
                        <video :src="el.shipin" controls="controls" height="400" width="700"></video>
                        <p>{{ el.comment }}</p>
                    </div>
                </div>
            </div>
        
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue"
let { proxy } = getCurrentInstance()
import { useRouter, useRoute } from "vue-router"
let $route = useRoute()
console.log($route.query.wid);
let arr1 = ref([])
let load01 = async () => {
    let res1 = await proxy.$axios.post("/egg/single", { wid: $route.query.wid })
    console.log(res1.data.info)
    arr1.value = arr1.value.concat(res1.data.info)
    console.log(res1.data.info[0].uid);
    console.log(arr1.value[0].title);
}
onMounted(() => {
    load01()
})
</script>

<style scoped>

.bigbox {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 350px;
    background-color: white;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("https://image.gogoup.com/static/pc/course/icon-course-top.jpg?x-oss-process=image/format,webp");
}

.box01 {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 20px;

}
.box02 {
    background-color: aliceblue;
    width: 100%;
    /* height: 1000px; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.videobox {
    background-color: white;
    height: 500px;
    width: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.myvideo {
    display: table;
    margin: auto;
}
.title {
    color: white;
    font-size: 32px
}

.touxiang {

    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.username {
    color: white;
}
</style>